<template>
  <div id="main-show-right">
    <draggable :list="tool.buttons" :force-fallback="true" animation="300">
      <template #item="ctx">
        <right-tool-button
            :key="ctx.element.id"
            :button="ctx.element"
            :index="ctx.index"
        />
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import RightToolButton from "./RightToolButton.vue";
import {useRightToolStore} from "../../../../store/rightTool";
import {useThemeStore} from "../../../../store/theme";

const tool = useRightToolStore()
const theme = useThemeStore()
</script>

<style scoped>
#main-show-right {
  width: 2%;
  display: flex;
  background-color: v-bind('theme.color.Tool.backgroundColor');
  flex-direction: column;
  border-top-style: none;
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color: v-bind('theme.color.DividingLine');
}
</style>